<template>
  <div class="rightArea h flex lcenter">
    <div v-if="$store.state.showUserInfoRight.account != ''" class=" m10 flex vcenter column UserInfoRight">
      <div class="w flex">
        <el-avatar shape="square" icon="el-icon-user-solid" class="m5 large" ></el-avatar>
        <div class="m5 flex evenly column f1" >
          <div class="flex vcenter between" style="height:20px;">
            <div style="font-size:16px">{{$store.state.showUserInfoRight.remarksName}}</div>
            <i class="m10 el-icon-more"></i>
          </div>
          <div class="lcenter smallFont grayText">{{'昵称：' + $store.state.showUserInfoRight.username}}</div>
          <div class="lcenter smallFont grayText">{{'账号：' + $store.state.showUserInfoRight.account}}</div>
        </div>
      </div>
      
      <div class="w m10 topBorder bottomBorder">
        <div class="w m10">
          <span class="m10 grayText">备注名</span>
          <span v-if="isEditRemarks == false" class="m10 hoverShow">
            <span >{{$store.state.showUserInfoRight.remarksName}}</span>
            <i @click="chackEdit" class="edit grayText pointer el-icon-edit"></i>
          </span>
          <el-input v-else-if="isEditRemarks == true" v-model="remarksName" v-focus @blur="editRemarksName" style="width:75%"></el-input>
        </div>
        <div v-if="$store.state.showUserInfoRight.isFriend" class="w m10">
          <span class="m10 grayText">添加时间</span>
          <span>{{$store.state.showUserInfoRight.timeToBeFriend}}</span>
        </div>
      </div>

      <div class="m10">
        <el-button @click="toChat" type="success">发送消息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isEditRemarks: false,
      remarksName: '',
    }
  },
  directives: {
    focus: {
      inserted: el => {
        //因为el-input这是个组件，input外面被一层 div 包裹着
        //el打印出来是外面这个 div，需要找到内层的input
        el.querySelector('input').focus() // 获取焦点
        el.querySelector('input').select() // 选中文字
      }
    }
  },

  methods: {
    toChat(index) {
      this.$store.commit('setChackChatUser', this.$store.state.showUserInfoRight)
      this.$store.commit('setShowUserInfoRight', { username: '', account: '', isFriend: false, })
      this.$router.push("/chat")
    },
    chackEdit(){
      this.isEditRemarks = true
      this.remarksName = this.$store.state.showUserInfoRight.remarksName
    },
    editRemarksName(){
      this.isEditRemarks = false
      this.$axios.post('http://localhost:3000/user/editRemarksName', { remarksName: this.remarksName, userData: this.$store.state.chatUserInfo, friendUserData: this.$store.state.showUserInfoRight })
        .then((res) => {
          console.log(res.data.friendUserData);
          let d = new Date(res.data.friendUserData.timeToBeFriend)
          this.$store.commit('setShowUserInfoRight', {
            isFriend: true,
            remarksName: res.data.friendUserData.remarksName,
            username: res.data.friendUserData.username,
			      account: res.data.friendUserData.account,
            timeToBeFriend: `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()-1} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`,
          })
        })
    },
  },
}
</script>

<style>
.UserInfoRight{
  width: 350px;
  height: 280px;
  margin: 20% 0 0 0;
}
.edit{
  display: none;
}
.hoverShow:hover .edit{
  display: inline;
}
</style>